<template>
  <el-card>
    <!-- 筛选表单区域 -->
    <el-row type="flex" justify="space-between" label-width="100%">
      <el-form :inline="true">
        <el-form-item>
          <!-- 搜索框 -->
          <el-input
            style="width: 350px"
            v-model="queryData.username"
            size="small"
            placeholder="请输入用户搜索"
          ></el-input>
        </el-form-item>
        <!-- 清空、搜索按钮 -->
        <el-form-item>
          <el-button @click="emptyFn" size="small" icon="el-icon-search"
            >清空</el-button
          >
          <el-button
            @click="searchFn"
            type="primary"
            plain
            size="small"
            icon="el-icon-refreseh"
            >搜索</el-button
          >
        </el-form-item>
        <!-- 新增用户按钮 -->
        <el-form-item>
          <el-button
            @click="addFn"
            icon="el-icon-edit"
            type="success"
            size="small"
            >新增用户</el-button
          >
        </el-form-item>
      </el-form>
    </el-row>
    <PageTools :text="`共${count}条数据`"></PageTools>
    <!-- 表格 -->
    <el-table :data="list" border>
      <el-table-column width="80" type="index" label="序号"></el-table-column>
      <el-table-column prop="email" label="邮箱"></el-table-column>
      <el-table-column prop="phone" label="联系电话"></el-table-column>
      <el-table-column prop="username" label="用户名"></el-table-column>
      <el-table-column
        prop="permission_group_title"
        label="权限组名称"
      ></el-table-column>
      <el-table-column prop="role" label="角色"></el-table-column>
      <el-table-column label="操作" sortable="" fixed="right" width="280">
        <template slot-scope="{ row }">
          <el-button
            @click="editFn(row.id)"
            plain
            circle
            type="primary"
            icon="el-icon-edit"
            size="small"
          ></el-button>
          <el-button
            @click="delFn(row.id)"
            plain
            circle
            v-if="row.permission_group_title !== '超级管理员组'"
            icon="el-icon-delete"
            type="danger"
            size="small"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-row type="flex" justify="center" align="middle" style="height: 60px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryData.page"
        :page-sizes="[10, 5, 3]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="count"
      >
      </el-pagination>
    </el-row>
    <!-- 新建用户弹框 -->
    <AddUser ref="addUser" @updateList="initData"></AddUser>
  </el-card>
</template>

<script>
import { getUserListApi, delUserApi, getUserInfoApi } from "@/api/houtai";
import AddUser from "./components/addUser.vue";
export default {
  name: "User",
  data() {
    return {
      queryData: {
        page: 1,
        pagesize: 10,
        username: "",
        disabled: 0,
      },
      list: [],
      count: 0,
    };
  },
  components: {
    AddUser,
  },
  created() {
    this.initData();
  },
  methods: {
    // 分页组件事件
    handleSizeChange(val) {
      this.queryData.pagesize = val;
      this.initData();
    },
    // 分页组件事件
    handleCurrentChange(val) {
      this.queryData.page = val;
      this.initData();
    },

    searchFn() {
      this.queryData.page = 1;
      this.initData();
      this.queryData.username = "";
    },
    // 获取用户列表
    async initData() {
      const { list, counts } = await getUserListApi(this.queryData);
      // const res = await getUserListApi(this.queryData);
      // console.log(res);
      this.list = list;
      this.count = counts;
    },
    // 清空按钮
    emptyFn() {
      this.queryData.username = "";
      this.initData();
    },
    // 删除
    async delFn(id) {
      try {
        await this.$confirm("你确定删除吗");
      } catch (error) {
        return console.log(error);
      }
      await delUserApi(id);
      this.initData();
      this.$message.success("删除成功");
      if (this.queryData.page !== 1 && this.list.length === 1) {
        this.queryData.page--;
      }
    },

    // 新增
    addFn() {
      this.$refs.addUser.showId = "";
      this.$refs.addUser.showDialog = true;
    },

    // 编辑
    async editFn(id) {
      this.$refs.addUser.showId = id;
      this.$refs.addUser.showDialog = true;
      const res = await getUserInfoApi(id);
      // console.log(res);
      this.$refs.addUser.formData = res;

      this.$refs.addUser.statusId = id;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
